<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        /* div.div1 
        {
            height: 300px;            
            border: 1px solid black;
            background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);

        }
        div.div1
        {
            animation-name: first;
            animation-duration: 10s;
            animation-iteration-count: infinite;
            animation-fill-mode: forwards;
        } */
        *{
            margin: 0;
            padding: 0;
        }
        ul.paginaction {
            display: inline-block;
            list-style: none;
        }
        ul.paginaction li {display: inline;}

        ul.paginaction li a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }
        
        ul.paginaction li a:hover {background-color: #ddd;}

        ul.breadcrumb {
    padding: 0 0;
    list-style: none;
    background-color: #eee;

}

ul.breadcrumb li {display: inline;}

ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "\00a0\00a0";
}
        a {
            text-decoration:none;
            color: black;
        }
        .daohang-style {
            margin: 0 auto;
            width:100%;
            height:40px;
            line-height: 40px;
            font-size: 25px;
            background-color: darkgrey;
        }
        .daohang-right {
            display: inline;
            position:absolute;
            right: 20px;
        }
        /* .daohang-style ul {
            width: 100%;
            height: 100%;
            border: 1px solid blue;          
        }
        .daohang-left{
            display: inline;
            list-style: none;
        }
        .daohang-right {
            display: inline;
            position:absolute;
            right: 20px;
        }
        .daohang-search {
            display: inline;
            height: 40;
        }
        .daohang-li {
            height: 100%;
            display: inline;
            list-style: none;
            margin: 0 30px;
            border: 1 solid red;
        } */
        .slide-auto {
        margin: 0px;
        padding: 0;
        width: 500%;
        height: 375px;
        transition: all 0.5s;
        }
        .slide-auto li {
            float: left;
            padding: 0px;
            list-style: none;
            width: 20%;
            height: 375px;
            line-height: 375px;
        }
         .lb {
            width: 100%;
            height: 100%;
        }
        @keyframes first {
            0% {margin-left: 0px;}
            25% {margin-left: -25%;}
            50% {margin-left: -50%;}
            75% {margin-left: -75%;}
            100% {margin-left: 0px;}
        }
        div#lunbotu {
            margin: auto;
            width: 100%;
            height: 400x;
            overflow: hidden;
        }
        .slide-auto{
            animation: lunbo 30s infinite;
        }
        @keyframes lunbo {
            0% {
                margin-left: 0;
            }
            16%{
                margin-left: 0;
            }
            20% {
                margin-left: -100%;
            }
            36%{
                margin-left: -100%;
            }
            40% {
                margin-left: -200%;
            }
            56% {
                margin-left: -200%;
            }
            60% {
                margin-left: -300%;
            }
            76% {
                margin-left: -300%;
            }
            80% {
                margin-left: -400%;
            }
            96% {
                margin-left: -400%;

            }
            100% {
                margin-left: 0;
            }

            
        }

        div.button a,div.button button,div.button input{
            background-color: #4CAF50;
            border: none;
            color: white;
            padding: 15px 20px;
            text-align: center;
            text-decoration: none;
            display: inline;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="daohang-style">
        <ul class="breadcrumb">
            <li class="daohang-left"><b>博客系统</b></li>
            <li class="daohang-li"><a href="#">首页</a></li>
            <li class="daohang-li">新闻</li>
            <li class="daohang-li">博问</li>
            <li class="daohang-li">发现</li>
            <li class="daohang-search"><input type="text" placeholder="系统维护中" disabled="disabled" style="height: 20px;vertical-align:middle;"></li>
            <li class="daohang-left">搜索</li>
            <li class="daohang-right">登陆</li>
        </ul>
    </div>
    <div id="lunbotu" class="slide">
        <ul class="slide-auto">
            <li><img class="lb" src="upload/lbt1.jpeg"></li>
            <li><img class="lb" src="upload/lbt2.jpeg"></li>
            <li><img class="lb" src="upload/lbt3.jpeg"></li>
            <li><img class="lb" src="upload/lbt4.jpeg"></li>
            <li><img class="lb" src="upload/lbt5.jpeg"></li>
        </ul>
    </div>
    <div class="div-right" style="height: 700px;width: 19.8%; float: right; margin-top: 5px;padding: 0 0;">
        <div class="date" style="width:100%; height:200px; background-color:red; text-align: center; line-height: 200px;">
            <h3>日期</h3>
        </div>
        <div class="date" style="width:100%; height:300px; background-color:green; text-align: center; line-height: 300px;margin-top: 5px;">
            <h3>词云</h3>
        </div>
        <div class="date" style="width:100%; height:190px; background-color:sandybrown; text-align: center; line-height: 200px;margin-top: 5px;">
            <h3>其他</h3>
        </div>
    </div>

    <div class="bokezhanshi" style="width: 80%; height: 700px; background-color: royalblue; margin-top: 5px; text-align: center;">
        <h2 style="line-height: 700px;">博客列表</h2>
    </div>
    <!-- <div class="button">
        <a href="#">链接按钮</a>
        <button>按钮</button>
        <input type="button" value="输入框按钮">
    </div> -->
    
    <div class="paginaction" style="width: 80%; height: 20px; text-align: center;">
        <ul class="paginaction">
            <li><a href="#">«</a></li>
            <li><a href="#">1</a></li>
            <li><a class="active" href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><a href="#">4</a></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">7</a></li>
            <li><a href="#">8</a></li>
            <li><a href="#">»</a></li>
    </div>
    <div style="width: 100%; height: 28px; background-color: darkgrey; margin: 16px 0 0 0; text-align: center;" >
<span>
    版权声明：网页版权归xxx所有 &nbsp&nbsp&nbsp详细问题联系xxx@qq.com
</span>    
</div>
</body>
</html>